<template>
    <div class="view">
        <div class="page-statistics scrollRow">
            <template>
                <u-scrollRow :list="classList" label="sstClassName" match="classId" v-model="selClass" @change="classChange"></u-scrollRow>
            </template>
            <div class="m-con">
				<u-table class="statistics_table" :data="poetryList" @row-click="lookDetail">
                    <u-table-column type="index" width="50" className="ind"></u-table-column>
                    <u-table-column prop="scenicName" label="景点">
                        <template slot-scope="scope">
							<span :class="['ellipsis',{'newIcon':scope.row.classUserNoCheck >=1}]">
								{{scope.row.scenicName | filterEllipsis}}
							</span>
                        </template>
                    </u-table-column>
                    <u-table-column prop="classUserAllCallNum" label="参与人数" width="110">
                        <template slot-scope="scope">
                            <div class="arrow">{{scope.row.classUserAllCallNum | filterLimit}}人</div>
                        </template>
                    </u-table-column>
                </u-table>
                <div class="vTips_empty" v-if="!poetryList || !poetryList.length">暂无数据</div>
            </div>
        </div>
    </div>
</template>

<script>
import * as api from "@/api/index";
export default {
    data(){
        return{
            userInfo:JSON.parse(localStorage.getItem('userInfo')),
            classList:[],
            selClass:{},    //所选class信息
            poetryList:[]
        }
    },
    mounted(){
        this.getInit()
    },
    watch:{
	},
	filters:{
		filterEllipsis(val){
			if(val&&val.length>6) return val.substring(0,6)+"..."
			return val
		},
		filterLimit(val){
			return val>999? '999+':val
		}
	},
    methods:{
        getInit(){
            const { classList } = this.userInfo
            this.classList = classList&&classList.length? classList: []
			var choseClassId = sessionStorage.getItem('choseClassId')
			this.selClass = choseClassId?this.classList.find(item => {return item.classId == choseClassId}):this.classList[0]
            this.getList()
        },
        //选择班级
        classChange(){
            this.getList()
        },
        //获取班级用户诗词竞猜平均分
        async getList(){
            var data={
                classId:this.selClass.classId,
                futureId:this.userInfo.futureId,
            }
            var res = await api.getListByFutureIdAndClassId(data)
            if(res.resultCode==1){
                this.poetryList=res.value?res.value:[]
            }
            else this.poetryList=[]
        },
        lookDetail(val){
            val = {
                ...val,
                classId: this.selClass.classId,
                className: this.selClass.sstClassName
            }
			sessionStorage.setItem("scenceInfo",JSON.stringify(val))
            
            this.$router.push({path:'/scence/scenceDetailT'})
		},
    },
}
</script>

<style lang="scss" scoped>
/deep/ .page-statistics .statistics_table {
	table thead tr th{
		padding-left: 0;
	}
	.classUserAllCallNum{
		text-align: right;
		padding-right: .4rem;
	}
	.scenicName .cell {
		position: relative;
		overflow: hidden;
	}
	.ellipsis{
		position: relative;
		padding-right: 1rem;
		white-space:nowrap; 
		overflow: hidden;
		text-overflow:ellipsis;
	}
	.newIcon::after{
		content: '';
		position: absolute; right: 0; top: 0;
		background: url(~@/assets/img/tour/new.png) no-repeat 0 center;
		background-size: 100%;
		width: .8rem; height: 100%;
	}
}
</style>
